{% extends "../base_adminlte.html" %}
{% load custom_markdown %}
{% block content %}
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
    <div class="content-header">
    </div>

  <section class="content">
      <form  action="{% url 'playbookupdate' %}" method="post" enctype="multipart/form-data">
          <table class="table table-bordered">
            <tr style="height: 10px">
                    <td  style="font-weight: bold;background-color: #3c8dbc80;">playbook文件名称</td>
                    <td><input type="text" id="playbook" name="playbook" value="{{ object.playbook}}"></td>
            </tr>
            <tr>
                    <td  style="font-weight: bold;background-color: #3c8dbc80;">别名</td>
                    <td><input type="text" id="nickName" name="nickName" value="{{ object.nickName}}"></td>
            </tr>
            <tr>
                    <td  style="font-weight: bold;background-color: #3c8dbc80;">描述</td>
                    <td><input type="text" id="remark" name="remark" value="{{ object.remark  }}"></td>
            </tr>
            <tr>
                    <td  style="font-weight: bold;background-color: #3c8dbc80;">作者</td><td>{{ object.author }}</td>
            </tr>
            <tr>
                    <td  style="font-weight: bold;background-color: #3c8dbc80;">状态</td><td><input type="text" id="pstatus" name="pstatus" value="{{ object.status  }}"></td>
            </tr>
            <tr>
                    <td  style="font-weight: bold;background-color: #3c8dbc80;">更新时间</td><td>{{ object.createTime }}</td>
            </tr>
            <tr>
                    <td  style="font-weight: bold;background-color: #3c8dbc80;">playbook内容</td>
                    <td  >
                   <textarea type="text"  id="playbook_text" name="playbook_text" class="form-control" cols="100"  rows="20" >{{ yml_content }}</textarea>
                    </td>
            </tr>
          </table>
          <input type="text" id="status" name="status" value="{{ status }}" hidden="hidden"></td>
        <button type="button" class="btn btn-primary" id="btn_edit">编辑</button>
        <button type="button" class="btn btn-primary" id="btn_cpcte">复制新增</button>
        <button type="submit" class="btn btn-primary" id="btn_submit" value="提交" >保存</button></td>
        <button type="reset" class="btn btn-primary" id="btn_cancel" value="取消" >重置</button></td>
        <button type="button" class="btn btn-primary" id="btn_check" onclick="fun1()">检测playbook语法</button>
        <button type="button" class="btn btn-primary" id="btn_run" onclick="location='{% url 'runtask' 1 %}?sldpb={{ object.playbook }}'">执行playbook</button>
        <button type="button" class="btn btn-primary" id="btn_return" onclick="location='{% url 'PlaybookList' %}'">返回playbook列表</button>
      </form>
    <textarea style="height:120px" readonly="readonly" type="text" id="info" class="form-control" name="vars"  rows="6" ></textarea>
  </section>
</div>
<style type="text/css">
    td {
         background-color: #d0eae9;
    }
</style>
{% endblock %}

{% block scriptcontent %}
<script>
    $(function () {
        var status = $('#status').val()
        if (status == 0){
            $('#btn_submit').hide();
            $('#btn_cancel').hide();
            $('#playbook').attr("readonly","readonly");
            $('#playbook').css({'background':'transparent','border-style':'none'});
            $('#nickName').attr("readonly","readonly");
            $('#nickName').css({'background':'transparent','border-style':'none'});
            $('#remark').attr("readonly","readonly");
            $('#remark').css({'background':'transparent','border-style':'none'});
            $('#playbook_text').attr("readonly","readonly");
            $('#playbook_text').css({'background':'Gainsboro'});
            $('#pstatus').attr("readonly","readonly");
            $('#pstatus').css({'background':'transparent','border-style':'none'});
        } else if ( status == 1){
            $('#btn_edit').hide();
            $('#btn_cpcte').hide();
            $('#btn_check').hide();
            $('#btn_run').hide();
            $('#btn_submit').show();
            $('#btn_cancel').show();
        }
    })

    $('#btn_edit').click(function(){
        setedit(2);
    });

    $('#btn_cpcte').click(function(){
        setedit(1);
    });

    function setedit(pagestatus){
        if (status == 0){
            $('#btn_edit').hide();
            $('#btn_check').hide();
            $('#btn_run').hide();
            $('#btn_cpcte').hide();
            $('#btn_submit').show();
            $('#btn_cancel').show();
            $('#nickName').removeAttr("readonly");
            $('#nickName').removeAttr("style");
            $('#remark').removeAttr("readonly");
            $('#remark').removeAttr("style");
            $('#playbook_text').removeAttr("readonly");
            $('#playbook_text').removeAttr("style");
            $('#pstatus').removeAttr("readonly");
            $('#pstatus').removeAttr("style");
            $('#status').val(pagestatus);
            if (pagestatus == 1){
                $('#playbook').removeAttr("readonly");
                $('#playbook').removeAttr("style");
            }
        }
    }

    function fun1(){
    const playbook = "{{ object.playbook }}";
    $.ajax({
            url: '/ansible/playbookcheck/'+playbook+'',
            async : false,
            success: function(data){
               $('#info').val(data);
            },
        });
    }
</script>
{% endblock %}

